<template>
  <div class>
    <div class="toolbar padding16">
      <el-button icon="el-icon-back" @click="back">返回</el-button>
      <el-alert style="margin-left: 10px  " title="下方显示为供货商结账单详情" type="success"/>
    </div>
    <div class="list-container padding16">
      <el-table
        v-loading.body="listLoading"
        ref="table"
        :stripe="true"
        :data="list"
        height="700"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column label="商品" min-width="320">
          <template slot-scope="scope">
            <div class="img-info">
              <img
                src="../../assets/product.png"
                height="50px"
                width="50px"
                style="background: #EFEFF7"
              >
              <div class="img-info-text" style="margin-left: 10px">
                <span
                  class="ohang1 pingming"
                  type="text"
                  size="small"
                  @click="toDetail(scope.row)"
                >{{ scope.row['品名'] }}</span>
                <span>{{ scope.row['供货商名称'] }}</span>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="货号包装" min-width="200">
          <template slot-scope="scope">
            <div class="img-info-text">
              <span>{{ scope.row['包装规格'] }}</span>
              <span>{{ scope.row['货号'] }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="单价(元)" min-width="200">
          <div slot-scope="scope" class="font12">
            {{ scope.row['成交价'] }}
            <el-tooltip class="item" effect="dark" content="填写与供货商协商后的价格" placement="bottom-start"/>
          </div>
        </el-table-column>
        <el-table-column label="数量" min-width="100">
          <div slot-scope="scope" class="font12">{{ scope.row['数量'] }}</div>
        </el-table-column>
        <el-table-column label="总价(元)" min-width="200">
          <div
            slot-scope="scope"
            class="font12"
          >{{ parseFloat(scope.row['成交价']*scope.row['数量']).toFixed(2) }}</div>
        </el-table-column>
        <el-table-column label="交货期" min-width="200">
          <div slot-scope="scope" class="font12">{{ scope.row['交货期'] }}</div>
        </el-table-column>

        <el-table-column label="订货人" min-width="200">
          <div slot-scope="scope" class="font12">{{ scope.row['请购人姓名'] }}</div>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { fetchList } from '../../api/api'
export default {
  name: 'Jiezhangdanxq',
  data() {
    return {
      list: [],
      id: '',
      multipleSelection: []
      // jiezhangdan: '',
      // listLoading: false,
      // options_project: [],
      // selected: '',
      // showConfirm: false
    }
  },
  created() {
    const id = this.$route.query.id
    this.id = id
    this.getList()
  },
  methods: {
    back() {
      this.$router.go(-1)
    },
    getList() {
      this.listLoading = true
      const param = { query: 'vue_供货商结账单详情list', 老师结账单号: this.id }
      fetchList(param).then(({ data }) => {
        this.listLoading = false
        this.showConfirm = false
        if (data.flag === '0') {
          this.list = []
        } else {
          this.list = data.data
          let t = true
          this.list.forEach((item) => {
            if (!item['课题卡号']) {
              t = false
            }
          })
          this.showConfirm = t
        }
      })
    }
  }
}
</script>

<style>
.padding16 {
  padding: 10px 0 0 16px;
}
.toolbar {
  margin-bottom: 6px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.el-table .success-row {
  background: #f0f9eb;
}
.el-table .warning-row {
  background: oldlace;
}
</style>
